<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <top-bar title="获得的奖项" bgc="background-color:#fff"></top-bar>
      <van-list
        style="margin-bottom: 15vh;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-cell
          v-for="item in awardList"
          :key="item._id"
          :title="item.code"
          :value="item.awardStatus ? '获奖' : '未获奖'"
          :label="item.actId"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      total: 0,
      loading: false,
      completed: false,
      isLoading: false,
      finished: false,
      awardList: []
    };
  },
  mounted() {
    this.getAwardList();
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    async getAwardList() {
      const res = await this.$api.get("/api/roster/list", {
        params: { number: this.userInfo.number }
      });
      this.awardList.push(...res.data.data.records);
      this.total = res.data.data.total;
      this.loading = false;
      if (this.pageSize * this.pageNum > res.data.data.total) {
        this.completed = true;
      }
      this.isLoading = false;
    },
    // 上滑加载
    pullUp() {
      if (this.pageSize * this.pageNum > this.total) {
        this.completed = true;
      }
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getAwardList();
    },
    // 下拉刷新
    pullDown() {
      this.pageNum = 1;
      this.completed = false;
      this.isLoading = true;
      this.awardList = [];
      this.getAwardList();
    }
  }
};
</script>

<style>
</style>